<template>
  <div class="logistics">
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="xheader.title" class="XHeader"></XHeader>
    </div>
    <div class="logistics-con" v-if="trickList.length">

      <div class="logistics-con-info" v-if="trickInfo.expressNo">
        <div class="logistics-con-info-item">
          <span>物流公司: </span>
          <span class="logistics-con-info-item-desc">{{trickInfo.expressCom}}</span>
        </div>
        <div class="logistics-con-info-item">
          <span>物流单号: </span>
          <span class="logistics-con-info-item-desc">{{trickInfo.expressNo}}</span>
        </div>
      </div>

      <ul class="logistics-con-box">
        <li class="logistics-con-box-list" v-for="(item, index) in trickList" :key="index">
          <div class="logistics-con-box-list-radius"></div>
          <div>
            <template v-if="paramsZY && isZY(paramsZY.sellerMemberId)">
              <div class="logistics-con-box-list-text">{{item.context}}</div>
              <div class="logistics-con-box-list-time">{{item.time}}</div>
            </template>
            <template v-else>
              <div class="logistics-con-box-list-text">{{item.content}}</div>
              <!--            <div class="logistics-con-box-list-text" v-if="item.operator">操作人：{{item.operator}}</div>-->
              <div class="logistics-con-box-list-time">{{item.msgTime}}</div>
            </template>
          </div>
        </li>
      </ul>
      <load-more
        v-if="!trickList.length"
        :show-loading="false"
        :tip="'暂无数据'"
        background-color="#fbf9fe"
      ></load-more>
    </div>
  </div>
</template>

<script>
  import Me from '@/dll/me'

  export default {
    name: 'logistics',
    data () {
      return {
        xheader: {
          title: '物流信息'
        },
        trickList: [],
        paramsZY: this.$route.query.paramsZY
      }
    },
    created () {
      this.getOrderTrick()
    },
    computed: {
      trickInfo () {
        let paramsZY = this.$route.query.paramsZY
        if (paramsZY && paramsZY.express_no && this.isZY(paramsZY.sellerMemberId)) {
          return {
            expressNo: paramsZY.express_no,
            expressCom: paramsZY.express_com
          }
        } else {
          return {}
        }
      }
    },
    methods: {
      async getOrderTrick () {
        let paramsZY = this.$route.query.paramsZY
        let param = {}
        let server
        if (paramsZY && paramsZY.express_no && this.isZY(paramsZY.sellerMemberId)) { // 如果是自营
          server = Me.getOrderTrickZY
          param = {
            express_no: paramsZY.express_no,
            order_id: paramsZY.order_id,
            express_com: paramsZY.express_com
          }
        } else { // 京东苏宁
          server = Me.getOrderTrick
          param = {
            order_id: this.$route.query.orderId,
            type: this.$route.query.type
          }
        }

        this.$vux.loading.show()
        await server(param).then(res => {
          this.$vux.loading.hide()
          if (res.code == 0) {
            if (paramsZY && this.isZY(paramsZY.sellerMemberId)) {
              this.trickList = res.data.content
            } else {
              this.trickList = res.data
            }
          } else {
            this.$vux.alert.show({
              title: '提示',
              content: res.msg,
              onHide: () => {
                this.$router.back()
              }
            })
          }
        })
      }
    }
  }
</script>

<style lang="less">
  .logistics {
    color: #ababab;
    font-size: 13px;

    .logistics-con {
      padding: 12px;

      .logistics-con-info {
        padding: 12px;
        background: #fff;
        margin-bottom: 12px;

        .logistics-con-info-item {
          &:last-child{
            margin-bottom: 0;
          }
          margin-bottom: 6px;
          .logistics-con-info-item-desc {

          }
        }
      }

      .logistics-con-box {
        background: #fff;
        margin: 0;
        padding: 0 12px;
        list-style: none;

        li:first-child {
          color: #ffbe00;

          .logistics-con-box-list-radius {
            background: #ffbe00;
          }
        }

        .logistics-con-box-list {
          border-bottom: 1px solid #fbf8f7;
          padding: 12px 0;
          display: flex;

          .logistics-con-box-list-radius {
            width: 8px;
            height: 8px;
            background: #ababab;
            border-radius: 50%;
            margin-right: 6%;
            margin-top: 6px;
            flex-shrink: 0;
          }

          .logistics-con-box-list-text {
            line-height: 21px;
          }

          .logistics-con-box-list-time {
            line-height: 28px;
          }
        }
      }
    }
  }
</style>
